<template>
  <su-popup
    :show="props.show"
    position="bottom"
    round="20"
    :overlay="true"
    @close="close_share_popup"
  >
    <view class="share-popup">
      <view class="share-popup__title">转发</view>

      <view class="share-popup__content ss-flex justify-around">
        <view class="share-item ss-flex-col justify-center align-center">
          <button
            open-type="share"
            class="share-button"
          >
            <image
              class="share-icon wechat-icon"
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/8ee6ff4103e85c07d876bc140ab5700c.png"
              mode=""
            />
            <view class="share-text">微信好友</view>
          </button>
        </view>
        <view class="share-item ss-flex-col justify-center align-center">
          <button
            class="share-button"
            @click="handle_moments_share"
          >
            <image
              class="share-icon moments-icon"
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250311/118c02ac304c0ed6fa4a7143d4f48a76.png"
              mode=""
            />
            <view class="share-text">朋友圈</view>
          </button>
        </view>
        <view class="share-item ss-flex-col justify-center align-center">
          <button
            class="share-button"
            @click="shear_show('share')"
          >
            <image
              class="share-icon qrcode-icon"
              src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/sns/20250316/8edc4c4685d7cef0b4706eaabc8bebea.png"
              mode=""
            />
            <view class="share-text">私信</view>
          </button>
        </view>
      </view>
      <view
        class="share-popup__cancel ss-m-t-20"
        @click="close_share_popup"
      >取消</view>
    </view>
  </su-popup>
</template>

<script setup>
import sheep from '@/sheep';
import { reactive } from 'vue';
import API from '@/association/api';
const emit = defineEmits(['close', 'shear_show', 'removeClim']);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  show_popup: false,
  clim_popup: false,
});
const close_share_popup = () => {
  emit('close');
}
const handle_moments_share = () => {
  // 朋友圈分享逻辑
  uni.showToast({
    title: '请点击右上角选择复制链接分享朋友圈',
    icon: 'none',
  });
  close_share_popup();
}
const shear_show = (type) => {
  emit('shear_show', type);
}
</script>

<style lang="scss" scoped>
.share-popup__cancel {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  border-top: 1rpx solid #eee;
}
.share-popup {
  padding: 30rpx;
  background-color: #fff;

  .share-popup__content {
    display: flex;
    flex-direction: row;
  }

  &__title {
    font-size: 32rpx;
    text-align: center;
    color: #333;
    margin-bottom: 40rpx;
  }

  &__content {
    padding: 20rpx 0;
  }

  &__cancel {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    border-top: 1rpx solid #eee;
  }

  .share-item {
    padding: 10rpx;

    .share-button {
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
      line-height: normal;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &::after {
        border: none;
      }
    }

    .share-icon {
      width: 70rpx;
      height: 70rpx;
      margin-bottom: 20rpx;
    }

    .wechat-icon {
      // background-color: #07c160; // 微信绿色
    }
    .qrcode-icon {
      // background-color: #1e90ff; // 二维码蓝色
    }

    .share-text {
      font-size: 28rpx;
      color: #333;
      margin-top: 10rpx;
    }
  }
}
</style>